<template>
	<el-dialog
	  :visible.sync="state.visible"
	  :fullscreen="fullscreen"
	  :custom-class="!fullscreen ? 'custom-height': 'custom-fullscreen'"
	  :close-on-click-modal="false"
	  :show-close="false"
	  @closed="close"
	>
		<el-row slot="title" type="flex">
			<el-col :span="20">{{ title }}</el-col>
			<el-col :span="4" style="text-align: right">
				<svg-icon
				  :icon-class="!fullscreen ? 'fullscreen': 'exit-fullscreen'"
				  style="cursor: pointer; margin-right: 10px"
				  @click="() => {fullscreen = !fullscreen}"
				/>
				<i class="el-icon-close" style="cursor: pointer" @click="close" />
			</el-col>
		</el-row>
		<el-form ref="dataForm" :model="form" label-position="right" label-width="100px">
  <el-row :gutter="18">
  
    <el-col :span="24">
		<el-form-item
		  label="日期"
		>
    <el-date-picker
      v-model="form.days"
      type="date"
      :picker-options="pickerOptions"
      value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>
    
		</el-form-item>
	  </el-col>

	  <!-- <el-col :span="24">
        <el-form-item
          label="任务"
        >
          <el-select
            filterable
            placeholder="请选择任务"
            v-model="form.productionOrderId"
            @change="changeProcurementOrder"
          >
            <el-option
              value=""
              label="-- 请选择 --"
            />
            <el-option
              v-for="(item, index) in productionOrderOptions"
              :key="index"
              :value="`${item.id}`"
              :label="`${item.title}`"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="订单项"
        >
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%; height: 600rpx;"
          
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="名称"
            width="120">
            <template slot-scope="scope">{{ scope.row.goods.name }}</template>
          </el-table-column>
          
          <el-table-column
            label="尺寸"
            width="120">
            <template slot-scope="scope">{{ scope.row.skuSize }}</template>
          </el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.usequantity"
                controls-position="right"
                placeholder="请输入数量"
                max="scope.row.quantity"
              />
            </template>
          </el-table-column>
        </el-table>

        </el-form-item>
      </el-col> -->



    <el-col :span="24">
		<el-form-item
		  label="生产单"
		>
    <el-select
            filterable
            placeholder="请选择生产单"
            v-model="form.productionOrderId"
            @change="handleSelectionChange"
          >
            <el-option
              value=""
              label="-- 请选择 --"
            />
            <el-option
              v-for="(item, index) in productionOrderOptions"
              :key="index"
              :value="`${item.id}`"
              :label="item.orderSkuDetailVO.goods.name"
            >
            </el-option>
          </el-select>
	
		</el-form-item>
	  </el-col>
	  <el-col :span="24">
		<el-form-item
		  label="完成数量"
		>
		<el-input-number
		  v-model="form.complete"
		  controls-position="right"
		  placeholder="请输入完成数量"
      :max="productionOrderMax"
		/>
		</el-form-item>
	  </el-col>
    <el-col :span="24">
		<el-form-item
		  label="损耗"
		>
    <el-input
		  v-model="form.loss"
		  controls-position="right"
		  placeholder="请输入损耗"
		/>
	
		</el-form-item>
	  </el-col> 
	  <!-- <el-col :span="24">
        <el-form-item
          label="领料员"
        >
          <el-select
            filterable
            placeholder="请选择领料员"
            v-model="form.iamUserId"
          >
            <el-option
              value=""
              label="-- 请选择 --"
            />
            <el-option
              v-for="(item, index) in more.iamUserOptions"
              :key="index"
              :value="`${item.value}`"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col> -->

      
  </el-row>
  </el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="close">
				取消
			</el-button>
			<el-button type="primary" :loading="state.confirmSubmit" :disabled="state.confirmSubmit" @click="onSubmit(false)">
				确定
			</el-button>
		</div>
	</el-dialog>
  </template>
  
  <script>
  import { dibootApi } from '@/utils/request'
  import { getInfo } from '@/api/user'
  import form from '@/components/diboot/mixins/form'
  export default {
    name: 'productionReportForm',
    mixins: [form],
    components: {
    },
    data() {
      return {
        tableData: [],
        storeroom: [],
        productionOrderMax: 0,
        productionOrderOptions: [],
        baseApi: '/productionReport',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }]
        },
        attachMoreList: [
            {
              target: 'iamUser',
              label: 'realname',
              value: 'id'
            },
            // {
            //   target: 'ProductionOrder',
            //   label: 'orderSkuId',
            //   value: 'id'
            // },
            {
              target: 'stockStatus'
            },
            {
              target: 'express',
              label: 'name',
              value: 'id'
            }
          ],

      }
    },
    async created() {
      const res = await dibootApi.get(`productionOrder/userlist`)
        if (res.code === 0) {
          this.productionOrderOptions = res.data
        }
    },
    // props: {

    //   procurementOrderId: {
    //     type: String,
    //     required: true
    //   },
    //   procurementOrderItemId: {
    //     type: String,
    //     required: true
    //   },
    //   unitId: {
    //     type: String,
    //     required: true
    //   }
    // },
    methods: {
      async changeProcurementOrder(value) {
        this.form.ordersId = value
        const res2 = await dibootApi.get(`/orderSku/list?ordersId=${value}`)
        if (res2.code === 0) {
          this.tableData = res2.data
        }
      },
      async handleSelectionChange(value) {
        const res2 = await dibootApi.get(`/productionOrder/${value}`)
        if (res2.code === 0) {
          this.productionOrderMax = res2.data.quantity;
          console.log(this.productionOrderMax)
        }
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  </style>
  